<template>
	<view>
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl" :style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class="" :style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar>
			<image :slot="'left'" @click="navToBack" :src="xcxImgUrl && xcxImgUrl+'fanhui.svg'" style="width: 36rpx;height: 36rpx;">
			</image>
			<text :slot="'content'">活动中心</text>
		</navBar>

		<scroll-view :style="{'height': 'calc(100vh - ' + statusBarHeight +' - '+height+')'}" scroll-y @scrolltolower="scrolltolower"
			class="main_activeCenter">
			<view style="width:100%;">
				<image style="width: 100%;" :src="xcxImgUrl && xcxImgUrl+'page_activity/static/activity_bg.svg'" mode="widthFix"></image>
			</view>
			<view v-for="(item,index) in activeList" :key="index" @click="toActiveDetails(item)"
				class="main_activeCenter_item pd10 mb10">
				<!-- <image class=""
				:src="item.type && item.type == 1 ? '/static/manzenghuodongBg.svg' : item.type && item.type == 2 ? './static/manjianhuodongBg.svg' : './static/miaoshahuodongBg.svg'"
				></image> -->
				<image class="" v-if="item.type == 1" :src="xcxImgUrl && xcxImgUrl+'page_activity/static/activity_full_gift.svg'"></image>
				<image class="" v-if="item.type == 2" :src="xcxImgUrl && xcxImgUrl+'page_activity/static/activity_full_reduce.svg'"></image>
				<image class="" v-if="item.type == 3" :src="xcxImgUrl && xcxImgUrl+'page_activity/static/activity_countdown.svg'"></image>
				<view
					style="width:100%;height:100%;position: absolute;left:0;top:0;display: flex;flex-direction: column;justify-content: space-around;padding:0 20rpx;box-sizing: border-box;">
					<view class="main_activeCenter_item_title">
						{{item.name ? item.name : ''}}
					</view>
					<view class="main_activeCenter_item_time">
						{{Utils.DateFormateArr(item.startTime,'nyr')}} - {{ Utils.DateFormateArr(item.endTime,'nyr')}}
					</view>
					<view :style="{'color': item.type == 1 ? '#EC4141' : item.type == 2 ? '#EC4141' : '#FFA114'}"
						class="main_activeCenter_item_btn">
						立即参与
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		listMallCommodityActivityPageInfo
	} from '@/api/global.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
		},
		data() {
			return {
				statusBarHeight: '',
				height: '',
				activeList: [], //活动列表
				lastPage: 0, //最后页数
				pageData: { //分页
					currentPage: 1,
					pageSize: 10
				},
				searchParams: {
					types: [1, 2], //类型[1：商品满赠 2：商品满减 3：商品满返]
					sort: 1
				}
			};
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				// 获取高度
				this.Utils.getDemoTopHeight('main_activeCenter')
			})
		},
		onLoad() {
			this.getActiveList() //获取列表
		},
		methods: {
			//返回上一页
			navToBack() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			//去活动详情
			toActiveDetails(item) {
				let activityInfo = {
					activityId: item.activityId,
					name: item.name,
					startTime: item.startTime,
					endTime: item.endTime,
					// summary:item.summary
				}

				//"type": 1, //类型[1：商品满赠 2：商品满减 3：商品满返]
				uni.navigateTo({
					url: `/page_activity/activeDetails?type=${item.type}&activityId=${item.activityId}&status=${item.status}`
				})
			},
			//获取活动列表
			async getActiveList() {
				uni.showLoading()
				let res = await listMallCommodityActivityPageInfo({
					...this.pageData,
					...this.searchParams
				})
				if (res.code == 2000) {
					uni.hideLoading()
					this.activeList = this.activeList.concat(res?.data?.info?.list || [])
					this.lastPage = res?.data?.info?.lastPage
				} else {
					this.Utils.toast(`${res.msg}`)
				}
			},
			//下拉加载
			scrolltolower() {
				this.pageData.currentPage++
				if (this.pageData.currentPage > this.lastPage) {
					return
				} else {
					// 获取单据列表
					this.getActiveList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main_activeCenter {
		width: 100%;
		box-sizing: border-box;
		background-color: rgba(254, 245, 228, 1);

		.main_activeCenter_item {
			width: calc(100% - 40rpx);
			margin: 0 auto 20rpx;
			height: 220rpx;
			box-sizing: border-box;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				// z-index: -1;
			}

			.main_activeCenter_item_title {
				font-size: $font_size_18;
				color: #FFF;
				font-weight: bold;
				  white-space: nowrap; /* 防止文本换行 */
				 overflow: hidden;    /* 隐藏超出部分 */
				text-overflow: ellipsis;
			}

			.main_activeCenter_item_time {
				font-size: $font_size_12;
				color: #FFF;
			}

			.main_activeCenter_item_btn {
				background-color: #FFF;
				padding: 10rpx 20rpx;
				border-radius: 60rpx;
				width: 100rpx;
				font-size: $font_size_12;
				text-align: center;
			}
		}
	}
</style>